<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .demo {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
        }

        li {
            list-style: none;
            border: solid 1px rebeccapurple;
        }
    </style>
</head>

<body>

    <div class="demo"></div>

    <script src="./fake-data/faker.min.js"></script>

    <script src="./JS/virtual-list.js"></script>

    <script>

        // 测试数据
        const testData = [];
        for (let i = 0; i < 100000; i++) {
            testData.push(
                {
                    index: i,
                    value: faker.lorem.sentences()
                });
        }
        // 示例代码
        var vl = new VirtualList('.demo', testData, (data) => {
            var li = document.createElement('li');
            li.innerHTML = `
            <h2>这是第${data.index + 1}项数据</h2>
            <p>${data.value}</p>
            `;
            // 在回调函数内可以进行逻辑的组装
            if (data.index % 2 === 0) {
                li.style.backgroundColor = 'pink';
            } else {
                li.style.backgroundColor = 'grey';
            }
            // 需要显式返回dom元素
            return li;
        }, { dynamicHeight: true, estimateListHeight: 40, useFrameOptimize: true });

        console.dir(vl);


    </script>
</body>

</html>